<template>
  <!-- 精品推荐 -->
  <div class="rom-list">
    <h3>精品推荐</h3>
    <van-grid :border="false" :column-num="2" :gutter="10">
      <van-grid-item v-for="item in images" :key="item.comic_id">
        <van-image :src="item.img" />
        <section class="text">
          <van-text-ellipsis :content="item.title" />
          <p class="flex">
            <van-tag :color="items.styles.find((s) => s.name === item.styles[0].name)?.color">{{
              item.styles[0].name
            }}</van-tag>
            <i @click="dialog" class="icon s-ico i-more"></i>
          </p>
        </section>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { getRecommendList } from '@/api/home.js'
import { showConfirmDialog, showToast } from 'vant'
import { bookListStore } from '@/stores/manage.js'
import { ref, onMounted } from 'vue'

const bookList = bookListStore()
const images = ref([])
// setTimeout(async () => {
//   const res = await getRecommendList()
//   images.value = res.data.data.list
//   console.log(res.data.data.list)
// }, 100)

onMounted(async () => {
  const res = await getRecommendList()
  images.value = res.data.data.list
  let ids = images.value.map(item => item.comic_id) 
  bookList.setBookIds(ids)
  console.log(res.data.data.list)
})
// 收藏弹出框
const dialog = () => {
  // console.log('收藏')
  showConfirmDialog({
    // title: '标题',
    message: '收藏到书架吧~',
  })
    .then(() => {
      // 确认
      showToast({
        message: '已收藏',
        icon: 'success',
        iconSize: '50px',
        duration: 1000,
      })
    })
    .catch(() => {
      // 取消
      showToast({
        message: '取消收藏',
        icon: 'fail',
        iconSize: '50px',
        duration: 1000,
      })
    })
}

const items = ref({
  styles: [
    { id: 1, name: '都市', color: '#ff0000' },
    { id: 2, name: '西幻', color: '#00ff00' },
    { id: 3, name: '古风', color: '#ff00ff' },
    { id: 4, name: '游戏竞技', color: '#b15bff' },
    { id: 5, name: '悬疑灵异', color: '#E9D26C' },
    { id: 6, name: '奇幻', color: '#AA73F1' },
    { id: 7, name: '现代', color: '#37DADA' },
    { id: 8, name: '玄幻', color: '#CC6CE7' },
    { id: 9, name: '青春', color: '#ffa500' },
    { id: 10, name: '武侠仙侠', color: '#EFC3CA' },
    { id: 11, name: '热血', color: '#3366ff' },
    { id: 12, name: '科幻', color: '#5f9ea0' },
  ],
})
</script>

<style lang="less" scoped>
.rom-list {
  padding-bottom: 50px;

  h3 {
    padding: 0px 10px;
  }

  .text {
    padding-left: 5px;
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;

    .flex {
      width: 100%;
      display: flex;
      margin: 0 auto;
      align-items: center;
      justify-content: space-between;

      .icon {
        display: inline-block;
        vertical-align: middle;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .s-ico {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
        flex-shrink: 0;
      }

      .s-ico.i-more {
        flex-shrink: 0;
        background-image: url(../../assets/images/i-more.png);
      }
    }
  }

  :deep(.van-grid-item__content) {
    padding: 0 !important;
    border-radius: 5px;
    background-color: transparent;
    overflow: hidden !important;
  }

  :deep(.van-tabbar-item) {
    color: #fff;
    font-size: 14px;
  }

  :deep(.van-image__img) {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background-size: contain;
  }

  :deep(.van-grid-item__content--center) {
    align-items: flex-start;
  }
}
</style>
